<template>
    <el-container>
        <el-header>
            <div class="total">
                <div class="s1">租房管理系统</div>
                <div class="s2"><el-button type="text" style="color: white" @click="logout">退出登录</el-button></div>
                <div class="blue-bar"></div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu class="menu" default-active="activeIndex" background-color="#293C50" text-color="#FFFFFF"
                    active-text-color="#ffd04b" @select="handleSelect">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>个人中心</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">修改密码</el-menu-item>
                            <el-menu-item index="1-2">个人信息</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-setting"></i>
                        <span slot="title">用户信息</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-goods"></i>
                        <span slot="title">房源信息</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-goods"></i>
                        <span slot="title">预约申请</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-bell"></i>
                        <span slot="title">用户反馈</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <el-tabs type="border-card">
                    <el-tab-pane label="用户留言" @click="SearchMessage">
                        <div v-for="(message, index) in messageData" :key="index" class="message-item">
                            <el-card class="message-card">
                                <div class="message-content-wrapper">
                                    <div class="message-content">{{ message.content }}</div>
                                    <div class="message-userName">{{ message.userName }}</div>
                                </div>
                                <div class="message-time">{{ message.postTime }}</div>
                            </el-card>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import axios from 'axios';
axios.defaults.baseURL = '/api'
const token = sessionStorage.getItem('adminToken');
export default {
    data() {
        return {
            activeIndex: '5',
            // 留言的数据  
            messageData: [],
        }
    },
    methods: {
        logout() {
            this.$router.push({ name: "login" });
        },
        handleSelect(key) {
            switch (key) {
                case '1':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "adminHome" });
                    break;
                case '2':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userAccount" });
                    break;
                case '3':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "houseInfo" });
                    break;
                case '4':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userAppointment" });
                    break;
                case '5':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userMess" });
                    break;
            }
        },
    },
    mounted() {
        axios.get(`/admin/user/getMessage`, {
            headers: {
                'Authorization': `Bearer ${token}`
            },
        }).then(result => {
            this.messageData = result.data.data;
        })
    }
}
</script>

<style scoped>
.el-header {
    position: relative;
    width: 100%;
    height: 60px;
    background-color: rgb(41, 60, 80);
    color: #FFFFFF;
    text-align: center;
    line-height: 60px;
    position: relative;
}

.el-aside {
    display: block;
    position: absolute;
    left: 0;
    top: 60px;
    bottom: 0;
}

.el-main {
    position: absolute;
    left: 200px;
    right: 0;
    top: 60px;
    bottom: 0;
    overflow-y: scroll;
}

.menu {
    height: 100%;
    padding: 0;
}

.s1 {
    float: left;
}

.s2 {
    float: right;
}

.blue-bar {
    height: 10px;
    background-color: rgb(0, 135, 244);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.message-item {
    margin-bottom: 20px;
    /* 每个留言项之间的间距 */
}

.message-card {
    border-radius: 4px;
    /* 圆角边框 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
    display: flex;
    /* 启用 Flexbox 布局 */
    flex-direction: column;
    /* 子元素垂直排列 */
}

.message-content-wrapper {
    display: flex;
    /* 启用 Flexbox 布局 */
    justify-content: space-between;
    /* 内容与用户名之间留有空隙 */
    align-items: center;
    /* 垂直居中对齐内容（如果需要） */
    padding: 16px;
    /* 内边距，现在应用于整个内容包装器 */
}

.message-content {
    font-size: 14px;
    /* 留言内容的字体大小 */
    color: #333;
    /* 字体颜色 */
    /* 移除原有的 padding，因为它现在被 .message-content-wrapper 管理 */
}

.message-userName {
    /* 移除 float: right; */
    font-size: 16px;
    /* 可以根据需要调整字体大小 */
    color: #666;
    /* 用户名字体颜色 */
    /* 其他样式，如字体加粗等，可以根据需要添加 */
}

.message-time {
    font-size: 12px;
    /* 时间的字体大小 */
    color: #666;
    /* 时间的字体颜色 */
    padding: 8px 16px;
    /* 内边距 */
    background-color: #f8f8f8;
    /* 时间的背景色 */
    /* 如果需要，可以添加 margin-top 来与内容部分分隔 */
    margin-top: 8px;
    /* 示例分隔 */
}
</style>